<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>墨阅-后台系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link th:href="@{/moyue/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/moyue/css/face.css}"  rel="stylesheet">
    <link th:href="@{/moyue/font-awesome-4.7.0/css/font-awesome.min.css}" rel="stylesheet">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon"/>
</head>
<body id="allBody">
<div class="top">
    墨阅--后台管理
    <i class="fa fa-navicon" style="color:#f7f7f7;font-size:10px;padding-left: 50px"></i>
</div>
<div class="fixed">
    <div class="broad">
        <ul>
            <li class="broad-item">
                <a href="/moyue/admin/bms/?page=1"><span>用户管理</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
            <li class="broad-item">
                <a href="/moyue/admin/book/all/?page=1" ><span>书籍管理</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
            <li class="broad-item">
                <a href="shenhe.html"><span>审核书籍</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
            <li class="broad-item">
                <a th:href="@{/moyue/admin/parentype} "><span>管理书籍类型</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
            <li class="broad-item">
                <a th:href="@{/moyue/admin/}"><span>管理书籍标签</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
            <li class="broad-item">
                <a href="/moyue/word/all/?page=1"><span>敏感词管理</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
            <li class="broad-item">
                <a th:href="@{/moyue/admin/book/uploadUI}"><span>书籍上传</span><i class="fa fa-angle-left" style="position:absolute;right: 10px;top: 15px; "></i></a>
            </li>
        </ul>
    </div>
<div class="fixed-iframe">
    <div class="top-face">
        <div class="header"> 书籍上传</div>
        <div class="table-face">
            <div class="ulist-step2">
                <form th:action="@{/moyue/admin/book/upload}" enctype="multipart/form-data" onsubmit="ccc()" method=post>
                    <dl>作品名称</dl>
                    <dt class="section2">
                        <input type="text" name="bookName" id="ulist1"  maxlength="15" onkeyup="work_title()"/>
                        <div class="flisde" id="warm1">15字内，请勿添加书名号等特殊符号</div>
                        <p class="booknamepan"></p>
                    </dt>
                    <dl>作品类型</dl>
                    <dt class="section3">
                            <select class="browsers-id">
                                <option th:label="请选择"></option>
                                <option th:each="ftype : ${typelist}"  th:label="${ftype.typeName}" th:value="${ftype.typeId}" >

                                </option>
                            </select>
                            <select class="browserson-id">
                                <option th:label="请选择"></option>
                            </select>
                    </dt>
                    <dl style="height: 50px">作品标签</dl>
                    <dt class="section4">
                        <input type="text" id="tagg"/>
                        <input type="hidden"  id="taggid">
                    </dt>
                    <div id="back1">
                        <div class="tab">
                            <img src="img/chahao.jpg" id="xiaoshi1"/>
                            <p>作品标签</p>
                            <div class="tabulist">
                                <div style="color: #999; font-size: 12px;">请选择最多5个作为您的作品标签，每类中限选一个：</div>
                                <div class="tablist">
                                    <ul>
                                        <li>
                                            <span>风格</span>
                                            <div class="tagfilter">
                                                <a href="javascript:;" th:each=" labels : ${label}" >
                                                    <input type="hidden" th:value="${labels.typeId}">
                                                    <span th:text="${labels.typeName}"></span>
                                                </a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="next-step" id="sure" onclick="listchoose()">
                                    <div class="button">确定</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <dl style="height: 150px;">作品介绍</dl>
                    <dt class="section5">
								<textarea style="margin-top: -88px;" name="bookDescription">

                                </textarea>
                        <div class="flisde">200~300字</div>
                    </dt>
                    <dl style="height: 150px;">作品封面</dl>
                    <dt class="section7">
                        <div id="box">
                            <img id="imgshow" src="" alt=""/>
                        </div>
                        <div id="pox">
                            <input id="filed" name="imgfile" type="file" accept="image/*" value="上传图片" />
                        </div>
                    </dt>
                    <dl style="margin-top: 20px;">文件上传</dl>
                    <dt class="section8">
                        <input type="file" name="bookfile" value="选择文件" >
                    </dt>
                    <dl>是否签约</dl>
                    <dt class="section6">
                        <input type="radio" name="bookIsContract" value="0" />
                        <label for="yes">是</label>
                        <input type="radio" name="bookIsContract"  value="1" />
                        <label for="no">否</label>
                    </dt>
                    <input type="hidden" class="lists" name="types">
                    <div class="next-step">
                    <input type="submit" class="button" id="step2">
                    </div>
                </form>

                <div id="back">
                    <div class="kindly">
                        <img src="img/chahao.jpg" id="xiaoshi"/>
                        <p>温馨提示</p>
                        <div class="next-step" id="tep1">
                            <div class="button">确定</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</body>
<script  th:src="@{/moyue/js/jquery-3.3.1.min.js}"></script>
<script  th:src="@{/moyue/js/bootstrap.min.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/all.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/new_file.js}"></script>
<script type="text/javascript" th:src="@{/moyue/js/face.js}" ></script>
<script th:inline="javascript">
    $('.browsers-id').on('change',function (){
        $.ajax({
            type: "POST",//数据发送的方式（post 或者 get）
            url: "/moyue/admin/book/getson",//要发送的后台地址
            data: {
                typeId:$('.browsers-id').val() ,
            },//要发送的数据（参数）格式为{'val1':"1","val2":"2"}
            dataType:"JSON",
            success: function (data) {//ajax请求成功后触发的方法
                if(data.code==0){
                    var datas=data.data;
                    $(".browserson-id").empty();

                    for (var aa in datas){
                        var str = "<option value="+datas[aa].typeId +"  "+ "label=" + datas[aa].typeName + " ></option>";
                        $(".browserson-id").append(str);
                    }
                }else{
                    alert(data.msg);
                }
            },
            error: function (msg) {//ajax请求失败后触发的方法
                alert("网络故障");//弹出错误信息
            }
        });
    })

    //在input file内容改变的时候触发事件
    $('#filed').change(function(){
        //获取input file的files文件数组;
        //$('#filed')获取的是jQuery对象，.get(0)转为原生对象;
        //这边默认只能选一个，但是存放形式仍然是数组，所以取第一个元素使用[0];
        var file = $('#filed').get(0).files[0];
        //创建用来读取此文件的对象
        var reader = new FileReader();
        //使用该对象读取file文件
        reader.readAsDataURL(file);
        //读取文件成功后执行的方法函数
        reader.onload=function(e){
            //读取成功后返回的一个参数e，整个的一个进度事件
            console.log(e);
            //选择所要显示图片的img，要赋值给img的src就是e中target下result里面
            //的base64编码格式的地址
            $('#imgshow').get(0).src = e.target.result;
        }
    })
    //温馨提示
    $(document).ready(function () {
//作品标签
        $('.section4').click(function(){
            $('#back1').css({'display':'block'});
        })
        $("#xiaoshi1").click(function(){
            $('#back1').css({'display':'none'});
        })

        $('#sure').click(function(){
            $('#back1').css({'display':'none'});

        })
        $(function(){
            $('.tagfilter a span').click(function(){
                $(this).parent().each(function () {//移除其余非点中状态
                    $('.tagfilte a span').removeClass("special_color");
                });
                $(this).addClass("special_color");//给所点中的增加样式
//		alert($(this).text());//输出所点的a的内容
                getElem("tagg").value = $(this).text();
                $('#taggid').val($(this).siblings("input").val());
            })
        }
        $('#step-back').click(function(){
            $('.ulist-step1').removeClass('none');
            $('.ulist-step2').addClass('none');
        })
        $('#tep1').click(function(){
            $('.ulist-step2').addClass('none');
            $('.ulist-step3').removeClass('none');
        })

        $("#xiaoshi").click(function(){
            $('#back').css({'display':'none'});
        })
//修改作品设置
        $('#step3').click(function(){
            $('.work-infom ul li dt').removeClass('none');
            $('.save').addClass('none');
        })
    })

</script>
</html>